export const defaultThemeStyles = {
    light: {
        general: {
            color: '#0a0a0a',
            backgroundInput: '#fff',
            colorPlaceholder: '#9ca6af',
            colorCaret: '#1976d2',
            colorSpinner: '#333',
            borderStyle: '1px solid #e1e4e8',
            backgroundScrollIcon: '#fff',
        },

        container: {
            border: 'none',
            borderRadius: '0',
            boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
        },

        header: {
            background: '#fff',
            colorRoomName: '#0a0a0a',
            colorRoomInfo: '#9ca6af',
        },

        footer: {
            background: '#f8f9fa',
            borderStyleInput: '1px solid #e1e4e8',
            borderInputSelected: '#1976d2',
            backgroundReply: '#e5e5e6',
            backgroundTagActive: '#e5e5e6',
        },

        content: {
            background: '#f8f9fa',
        },

        sidemenu: {
            background: '#fff',
            backgroundHover: '#f6f6f6',
            backgroundActive: '#e5effa',
            colorActive: '#1976d2',
            borderColorSearch: '#e1e5e8',
        },

        dropdown: {
            background: '#fff',
            backgroundHover: '#f6f6f6',
        },

        message: {
            background: '#fff',
            backgroundMe: '#ccf2cf',
            color: '#0a0a0a',
            colorStarted: '#9ca6af',
            backgroundDeleted: '#dadfe2',
            colorDeleted: '#757e85',
            colorUsername: '#9ca6af',
            colorTimestamp: '#828c94',
            backgroundDate: '#e5effa',
            colorDate: '#505a62',
            backgroundSystem: '#e5effa',
            colorSystem: '#505a62',
            backgroundMedia: 'rgba(0, 0, 0, 0.15)',
            backgroundReply: 'rgba(0, 0, 0, 0.08)',
            colorReplyUsername: '#0a0a0a',
            colorReply: '#6e6e6e',
            colorTag: '#0d579c',
            backgroundImage: '#ddd',
            colorNewMessages: '#1976d2',
            backgroundScrollCounter: '#0696c7',
            colorScrollCounter: '#fff',
            backgroundReaction: '#eee',
            borderStyleReaction: '1px solid #eee',
            backgroundReactionHover: '#fff',
            borderStyleReactionHover: '1px solid #ddd',
            colorReactionCounter: '#0a0a0a',
            backgroundReactionMe: '#cfecf5',
            borderStyleReactionMe: '1px solid #3b98b8',
            backgroundReactionHoverMe: '#cfecf5',
            borderStyleReactionHoverMe: '1px solid #3b98b8',
            colorReactionCounterMe: '#0b59b3',
        },

        markdown: {
            background: 'rgba(239, 239, 239, 0.7)',
            border: 'rgba(212, 212, 212, 0.9)',
            color: '#e01e5a',
            colorMulti: '#0a0a0a',
        },

        room: {
            colorUsername: '#0a0a0a',
            colorMessage: '#67717a',
            colorTimestamp: '#a2aeb8',
            colorStateOnline: '#4caf50',
            colorStateOffline: '#9ca6af',
            backgroundCounterBadge: '#0696c7',
            colorCounterBadge: '#fff',
        },

        emoji: {
            background: '#fff',
        },

        icons: {
            search: '#9ca6af',
            add: '#1976d2',
            toggle: '#0a0a0a',
            menu: '#0a0a0a',
            close: '#9ca6af',
            closeImage: '#fff',
            file: '#1976d2',
            paperclip: '#1976d2',
            closeOutline: '#000',
            send: '#1976d2',
            sendDisabled: '#9ca6af',
            emoji: '#1976d2',
            emojiReaction: 'rgba(0, 0, 0, 0.3)',
            document: '#1976d2',
            pencil: '#9e9e9e',
            checkmark: '#9e9e9e',
            checkmarkSeen: '#0696c7',
            eye: '#fff',
            dropdownMessage: '#fff',
            dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
            dropdownRoom: '#9e9e9e',
            dropdownScroll: '#0a0a0a',
            microphone: '#1976d2',
            microphoneOff: '#eb4034',
        },

        panel: {
            background: '#ffffff',
            colorName: '#303133',
            colorIcon: '#909399',
            colorDesc: '#606266',
            colorTimestamp: '#606266',
            itemBg: '#e5effa',
            itemBgHover: '#f2f6fc',
            sideBar: '#303133',
            headerBg: '#fff',
            colorStickerType: '#303133',
            colorStickerSelected: '#409eff',
            colorStickerHover: '#66b1ff',
            colorNaviBottomBar: '#E4E7ED',
        },
    },
    dark: {
        general: {
            color: '#fff',
            backgroundInput: '#202223',
            colorPlaceholder: '#596269',
            colorCaret: '#fff',
            colorSpinner: '#fff',
            borderStyle: 'none',
            backgroundScrollIcon: '#fff',
        },

        container: {
            border: 'none',
            borderRadius: '0',
            boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)',
        },

        header: {
            background: '#181a1b',
            colorRoomName: '#fff',
            colorRoomInfo: '#9ca6af',
        },

        footer: {
            background: '#131415',
            borderStyleInput: 'none',
            borderInputSelected: '#1976d2',
            backgroundReply: '#1b1c1c',
            backgroundTagActive: '#1b1c1c',
        },

        content: {
            background: '#131415',
        },

        sidemenu: {
            background: '#181a1b',
            backgroundHover: '#202224',
            backgroundActive: '#151617',
            colorActive: '#fff',
            borderColorSearch: '#181a1b',
        },

        dropdown: {
            background: '#2a2c33',
            backgroundHover: '#26282e',
        },

        message: {
            background: '#22242a',
            backgroundMe: '#1f7e80',
            color: '#fff',
            colorStarted: '#9ca6af',
            backgroundDeleted: '#1b1c21',
            colorDeleted: '#a2a5a8',
            colorUsername: '#b3bac9',
            colorTimestamp: '#ebedf2',
            backgroundDate: 'rgba(0, 0, 0, 0.3)',
            colorDate: '#bec5cc',
            backgroundSystem: 'rgba(0, 0, 0, 0.3)',
            colorSystem: '#bec5cc',
            backgroundMedia: 'rgba(0, 0, 0, 0.18)',
            backgroundReply: 'rgba(0, 0, 0, 0.18)',
            colorReplyUsername: '#fff',
            colorReply: '#d6d6d6',
            colorTag: '#f0c60a',
            backgroundImage: '#ddd',
            colorNewMessages: '#fff',
            backgroundScrollCounter: '#1976d2',
            colorScrollCounter: '#fff',
            backgroundReaction: 'none',
            borderStyleReaction: 'none',
            backgroundReactionHover: '#202223',
            borderStyleReactionHover: 'none',
            colorReactionCounter: '#fff',
            backgroundReactionMe: '#4e9ad1',
            borderStyleReactionMe: 'none',
            backgroundReactionHoverMe: '#4e9ad1',
            borderStyleReactionHoverMe: 'none',
            colorReactionCounterMe: '#fff',
        },

        markdown: {
            background: 'rgba(239, 239, 239, 0.7)',
            border: 'rgba(212, 212, 212, 0.9)',
            color: '#e01e5a',
            colorMulti: '#0a0a0a',
        },

        room: {
            colorUsername: '#fff',
            colorMessage: '#6c7278',
            colorTimestamp: '#6c7278',
            colorStateOnline: '#4caf50',
            colorStateOffline: '#596269',
            backgroundCounterBadge: '#1976d2',
            colorCounterBadge: '#fff',
        },

        emoji: {
            background: '#343740',
        },

        icons: {
            search: '#596269',
            add: '#fff',
            toggle: '#fff',
            menu: '#fff',
            close: '#9ca6af',
            closeImage: '#fff',
            file: '#1976d2',
            paperclip: '#fff',
            closeOutline: '#fff',
            send: '#fff',
            sendDisabled: '#646a70',
            emoji: '#fff',
            emojiReaction: '#fff',
            document: '#1976d2',
            pencil: '#ebedf2',
            checkmark: '#ebedf2',
            checkmarkSeen: '#f0d90a',
            eye: '#fff',
            dropdownMessage: '#fff',
            dropdownMessageBackground: 'rgba(0, 0, 0, 0.25)',
            dropdownRoom: '#fff',
            dropdownScroll: '#0a0a0a',
            microphone: '#fff',
            microphoneOff: '#eb4034',
        },

        panel: {
            background: '#0D0E0F',
            colorName: '#F2F6FC',
            colorIcon: '#C0C4CC',
            colorDesc: '#b3bac9',
            colorTimestamp: '#b3bac9',
            itemBg: '#22242a',
            itemBgHover: '#1e1e25',
            sideBar: '#000',
            headerBg: '#181A1B',
            colorStickerType: '#C0C4CC',
            colorStickerSelected: '#409eff',
            colorStickerHover: '#66b1ff',
            colorNaviBottomBar: '#343536',
        },
    },
}

export const cssThemeVars = ({
    general,
    container,
    header,
    footer,
    sidemenu,
    content,
    dropdown,
    message,
    markdown,
    room,
    emoji,
    icons,
    panel,
}) => {
    return {
        // general
        '--chat-color': general.color,
        '--chat-bg-color-input': general.backgroundInput,
        '--chat-color-spinner': general.colorSpinner,
        '--chat-color-placeholder': general.colorPlaceholder,
        '--chat-color-caret': general.colorCaret,
        '--chat-border-style': general.borderStyle,
        '--chat-bg-scroll-icon': general.backgroundScrollIcon,

        // container
        '--chat-container-border': container.border,
        '--chat-container-border-radius': container.borderRadius,
        '--chat-container-box-shadow': container.boxShadow,

        // header
        '--chat-header-bg-color': header.background,
        '--chat-header-color-name': header.colorRoomName,
        '--chat-header-color-info': header.colorRoomInfo,

        // footer
        '--chat-footer-bg-color': footer.background,
        '--chat-border-style-input': footer.borderStyleInput,
        '--chat-border-color-input-selected': footer.borderInputSelected,
        '--chat-footer-bg-color-reply': footer.backgroundReply,
        '--chat-footer-bg-color-tag-active': footer.backgroundTagActive,

        // content
        '--chat-content-bg-color': content.background,

        // sidemenu
        '--chat-sidemenu-bg-color': sidemenu.background,
        '--chat-sidemenu-bg-color-hover': sidemenu.backgroundHover,
        '--chat-sidemenu-bg-color-active': sidemenu.backgroundActive,
        '--chat-sidemenu-color-active': sidemenu.colorActive,
        '--chat-sidemenu-border-color-search': sidemenu.borderColorSearch,

        // dropdown
        '--chat-dropdown-bg-color': dropdown.background,
        '--chat-dropdown-bg-color-hover': dropdown.backgroundHover,

        // message
        '--chat-message-bg-color': message.background,
        '--chat-message-bg-color-me': message.backgroundMe,
        '--chat-message-color-started': message.colorStarted,
        '--chat-message-bg-color-deleted': message.backgroundDeleted,
        '--chat-message-color-deleted': message.colorDeleted,
        '--chat-message-color-username': message.colorUsername,
        '--chat-message-color-timestamp': message.colorTimestamp,
        '--chat-message-bg-color-date': message.backgroundDate,
        '--chat-message-color-date': message.colorDate,
        '--chat-message-bg-color-system': message.backgroundSystem,
        '--chat-message-color-system': message.colorSystem,
        '--chat-message-color': message.color,
        '--chat-message-bg-color-media': message.backgroundMedia,
        '--chat-message-bg-color-reply': message.backgroundReply,
        '--chat-message-color-reply-username': message.colorReplyUsername,
        '--chat-message-color-reply-content': message.colorReply,
        '--chat-message-color-tag': message.colorTag,
        '--chat-message-bg-color-image': message.backgroundImage,
        '--chat-message-color-new-messages': message.colorNewMessages,
        '--chat-message-bg-color-scroll-counter': message.backgroundScrollCounter,
        '--chat-message-color-scroll-counter': message.colorScrollCounter,
        '--chat-message-bg-color-reaction': message.backgroundReaction,
        '--chat-message-border-style-reaction': message.borderStyleReaction,
        '--chat-message-bg-color-reaction-hover': message.backgroundReactionHover,
        '--chat-message-border-style-reaction-hover': message.borderStyleReactionHover,
        '--chat-message-color-reaction-counter': message.colorReactionCounter,
        '--chat-message-bg-color-reaction-me': message.backgroundReactionMe,
        '--chat-message-border-style-reaction-me': message.borderStyleReactionMe,
        '--chat-message-bg-color-reaction-hover-me': message.backgroundReactionHoverMe,
        '--chat-message-border-style-reaction-hover-me': message.borderStyleReactionHoverMe,
        '--chat-message-color-reaction-counter-me': message.colorReactionCounterMe,

        // markdown
        '--chat-markdown-bg': markdown.background,
        '--chat-markdown-border': markdown.border,
        '--chat-markdown-color': markdown.color,
        '--chat-markdown-color-multi': markdown.colorMulti,

        // room
        '--chat-room-color-username': room.colorUsername,
        '--chat-room-color-message': room.colorMessage,
        '--chat-room-color-timestamp': room.colorTimestamp,
        '--chat-room-color-online': room.colorStateOnline,
        '--chat-room-color-offline': room.colorStateOffline,
        '--chat-room-bg-color-badge': room.backgroundCounterBadge,
        '--chat-room-color-badge': room.colorCounterBadge,

        // emoji
        '--chat-emoji-bg-color': emoji.background,

        // icons
        '--chat-icon-color-search': icons.search,
        '--chat-icon-color-add': icons.add,
        '--chat-icon-color-toggle': icons.toggle,
        '--chat-icon-color-menu': icons.menu,
        '--chat-icon-color-close': icons.close,
        '--chat-icon-color-close-image': icons.closeImage,
        '--chat-icon-color-file': icons.file,
        '--chat-icon-color-paperclip': icons.paperclip,
        '--chat-icon-color-close-outline': icons.closeOutline,
        '--chat-icon-color-send': icons.send,
        '--chat-icon-color-send-disabled': icons.sendDisabled,
        '--chat-icon-color-emoji': icons.emoji,
        '--chat-icon-color-emoji-reaction': icons.emojiReaction,
        '--chat-icon-color-document': icons.document,
        '--chat-icon-color-pencil': icons.pencil,
        '--chat-icon-color-checkmark': icons.checkmark,
        '--chat-icon-color-checkmark-seen': icons.checkmarkSeen,
        '--chat-icon-color-eye': icons.eye,
        '--chat-icon-color-dropdown-message': icons.dropdownMessage,
        '--chat-icon-bg-dropdown-message': icons.dropdownMessageBackground,
        '--chat-icon-color-dropdown-room': icons.dropdownRoom,
        '--chat-icon-color-dropdown-scroll': icons.dropdownScroll,
        '--chat-icon-color-microphone': icons.microphone,
        '--chat-icon-color-microphone-off': icons.microphoneOff,

        //panel
        '--panel-background': panel.background,
        '--panel-color-name': panel.colorName,
        '--panel-color-icon': panel.colorIcon,
        '--panel-color-desc': panel.colorDesc,
        '--panel-color-timestamp': panel.colorTimestamp,
        '--panel-item-bg': panel.itemBg,
        '--panel-item-bg-hover': panel.itemBgHover,
        '--panel-sidebar-bg': panel.sideBar,
        '--panel-header-bg': panel.headerBg,
        '--panel-color-sticker-type': panel.colorStickerType,
        '--panel-color-sticker-type-selected': panel.colorStickerSelected,
        '--panel-color-sticker-type-hover': panel.colorStickerHover,
        '--panel-color-navi-bottom-bar': panel.colorNaviBottomBar,
    }
}
